<template>
  <div class="detail flex">
    <div class="coverImg">
      <div class="big">
        <img :src="`https://sc.wolfcode.cn` + data.imgAltas[curr].src" alt="" />
      </div>
      <div class="img-list flex">
        <div v-for="(item, index) in data.imgAltas" :key="item.src">
          <img
            :src="`https://sc.wolfcode.cn` + item.src"
            alt=""
            :class="{ current: curr == index }"
            @click="curr = index"
          />
        </div>
      </div>
    </div>

    <div class="info">
      <div class="good-info">
        <div class="name">{{ data.seriesTitle }}</div>
        <div class="des">{{ data.seriesSubTitle }}</div>
        <div class="price">
          {{ data.coin
          }}<span><img src="../../assets/images/home/monad.png" alt="" /></span>
        </div>
      </div>

      <div class="cate">
        <div class="cate-name">选择{{ data.parameterJson[0].title }}</div>
        <div class="flex">
          <div
            v-for="item in data.parameterJson[0].parameters"
            :key="item.id"
            class="cate-item"
            :class="{ active: item.id == $route.query.id }"
            @click="chang(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="opt">
        <div class="count">
          数量：<span>礼品库存有{{ data.stock }}件</span>
        </div>
        <div class="step flex">
          <span @click="rem">-</span><input type="text" v-model="num" /><span
            @click="add"
            >+</span
          >
        </div>
        <div class="btns flex">
          <div class="btn add" @click="addTotal">加入购物车</div>
          <div class="btn duihuan">立即兑换</div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { toast } from "../../utils/toast";
import { getGwcApi } from "../../http/api";
export default {
  props: ["data"],
  data() {
    return {
      num: 1,
      //当前图片
      curr: 0,
    };
  },
  created() {
    if (this.$route.query.id) {
      //把商品的id存起来
      localStorage.setItem("detailId", this.$route.query.id);
    }
  },
  methods: {
    chang(id) {
      this.$router.push(this.$route.path + "?id=" + id);
    },
    //添加商品
    add() {
      if (this.num >= this.data.stock) return toast("超出库存了", "warnning");
      this.num++;
    },
    //减减商品
    rem() {
      if (this.num <= 1) return toast("至少选择一项", "warnning");
      this.num--;
    },
    addTotal() {
      //判断是否登录，没有登录就弹出登录页面
      if (!this.$store.state.userInfo.nickName) {
        this.$store.commit("mod", true);
        return toast("请先登录", "warnning");
      }
      //向服务器发送请求
      getGwcApi({
        //商品id
        productId: this.$route.query.id,
        //商品数量
        total: this.num,
      }).then((res) => {
        console.log(res);
        if (res.code === 0) {
          toast("加入购物车成功", "warnning");
          this.$store.commit("gwc");
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.detail {
  width: 970px;
  .coverImg {
    width: 460px;
    height: 560px;
    .big {
      img {
        width: 460px;
        height: 440px;
        background: #efefef;
      }
    }
    .img-list {
      justify-content: space-between;
      img {
        width: 100px;
        height: 100px;
        opacity: 0.5;
        &.current {
          opacity: 1;
        }
      }
    }
  }
  .info {
    margin-left: 30px;
    flex: 1;
    .good-info {
      border-bottom: 2px solid #ccc;
      .name {
        line-height: 42px;
        font-size: 28px;
        font-weight: 400;
        color: #000000;
      }
      .des {
        font-size: 14px;
        font-weight: 300;
        color: #999999;
        line-height: 28px;
      }
      .price {
        font-size: 28px;
        font-weight: bold;
        color: #fd604d;
        line-height: 72px;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .cate {
    padding-top: 5px;
    .cate-name {
      font-size: 16px;
      font-weight: 300;
      color: #000000;
      line-height: 34px;
    }
    .flex {
      flex-wrap: wrap;
      .cate-item {
        cursor: pointer;
        width: 76px;
        height: 32px;
        border: 1px solid #d1d1d1;
        text-align: center;
        line-height: 32px;
        margin: 0 20px 20px 0;
        &.active {
          border-color: #0a328e;
          color: #0a328e;
        }
      }
    }
  }
  .opt {
    .count {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      line-height: 60px;
      color: #000000;
      span {
        color: #666;
        font-weight: normal;
      }
    }
    .step {
      span {
        width: 30px;
        height: 32px;
        border: 1px solid #d1d1d1;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        user-select: none;
      }
      input {
        width: 46px;
        height: 32px;
        padding: 0 5px;
        border: 1px solid #d1d1d1;
        border-left: 0 solid #000;
        border-right: 0 solid #000;
        text-align: center;
      }
    }
    .btns {
      padding-top: 20px;
      .btn {
        width: 150px;
        height: 46px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 46px;
        margin-right: 20px;
        cursor: pointer;
        &.add {
          background: #3dc36b;
        }
        &.duihuan {
          background-color: #fd604d;
        }
      }
    }
  }
}
</style>